function FLake() {
    // 创建一个img标签
    // document 文件夹 create创建 element标签
    // 创建一个叫做img的标签赋值给f变量
    // createElement 相当于html里面的元素
    var f = document.createElement('img');
    // 设置图片的宽高  client  使用端
    // clientHeight在页面中返回的可视高度(不包括边框和滚动条)
    var h = document.documentElement.clientHeight;
    // 宽度   返回的可视宽度
    var w = document.documentElement.clientWidth;
    // 设置起始坐标 top left
    // 由于每个雪花出现的位置不一样 所有top left都是随机数
    // 雪花h*(0~~~1) *乘以  /除以
    // Math  数字   random范围   random随机数方法
    // 设置一个随机数字  范围是(0.0~~1.0)*h
    var top = h * Math.random();
    // 设置left  结合自身宽度   
    var left = w * Math.random();
    // 设置图片
    f.src = 'flake.png';
    // 设置元素的定位方式
    f.style.position = 'absolute';
    // 设置距离参照物的上边距
    f.style.top = top + 'px';
    // 设置左侧边距
    f.style.left = left + 'px';
    // 设置缩放  直接设置倍数
    // 也可以通过x,y分别来设置具体方向的缩放
    f.style.transform = "scale(" + Math.random() / 2 + ")"
    // 把配置好的img插入到body区域
    // append 追加   Child子  
    document.body.appendChild(f);
    // 创建下落的方法
    function down() {
        // 让元素的top值以0~~~10的数值随机增加
        // +=加上
        top += Math.random() * 10;
        left += Math.random() * 5;
        // 如果top>可视内容高度的时候变成-100
        // 瑕疵再下落的时候，会从窗口外部进入
        if (top > h) top = -100;
        if (left > w) left = -100;
        // 设置元素距离参照物的上边距
        f.style.top = top + 'px';
        f.style.left = left + 'px';
    }
    // 每隔50毫秒调用一次down函数
    setInterval(down, 50);
}
// for循环  重复执行某一个动作指定的次数
// 1.声明一个变量叫做i 初始值是0
// 2.循环的次数  0~49
// 3.正负循环  
// 让雪花下落50次
for (var i = 0; i < 50; i++) { new FLake(); }


